<template>
	<view>
		<head-goods-search :is_search="true"  @sendSearch="sendSearch"></head-goods-search>
		<view class="answers-container">
			<view class="answers-list">
				<view class="li" v-for="(item,index) in askList" :key="index"  @click="navigateTo('./details?id='+item.id)">
					<div class="answers-q">
						<h3 style="width:84%"><span>Q</span><i style="width:80%">{{item.title}}</i></h3>
						<p><span>{{item.count?item.count:0}}</span>个回答</p>
					</div>
					<div class="answers-a">
						<span>A</span>
						<p>{{item.answer|answerFilter}}</p>
					</div>
				</view>
			</view>
			<paging :total="count" activecolor="#fff" activebackground="#fd8197" :pageSize='pagesize'  :current="page" @changes="dd"></paging>
			<!-- 销量与猜你喜欢 -->
			<sales leftTitle="销量排行榜" rightTitle="新品上架" :leftList="leftList" :rightList="rightList"></sales>
			<!-- 关注 -->
			<div class="follow-contanier">
				<h3>最受关注排行榜<span class="hd-icon">&#xe601;</span></h3>
				<view class="follow-list">
					<view class="li" hover-stay-time="100" hover-class="grace-opacity"  @click="navigateTo('./details?id='+item.id)" v-for="(item,index) in followAskList" :key="index">
						<view class="follow-left" hover-stay-time="100" :data-id="index" hover-class="grace-opacity">
							<!--  @click="changeAccordion" -->
							{{item.stitle}}
							<!-- <div>
								<text class="grace-list-imgs-arrow grace-icons icon-arrow-up" v-if="accordionActive == index"></text>
								<text class="grace-list-imgs-arrow grace-icons icon-arrow-down" v-else></text>
							</div> -->
						</view>
						<!-- <view class="follow-right" :class="['grace-accordion-body', accordionActive == index ? 'grace-accordion-show' : 'grace-accordion-hide']">
							<view style="padding:20rpx; line-height:2em;">{{item.stitle}}</view>
						</view> -->
					</view>
				</view>
			</div>
		</view>
		<foot-bottom></foot-bottom>
		<fab :topBtn="isTopBtn"></fab>
	</view>
</template>

<script>
	import fab from '@/components/fab'
	import footBottom from '@/components/footBottom'; //公共底部
	import { getAskList,IndexAsk } from '@/api/shop'
	import { indexAllAskList,ListByIndexAsk } from '@/api/answers'
 import paging from '@/components/yang-paging/fy.vue'
	export default {
	    data() {
			return{
				accordionActive:'',
				isTopBtn:false,
				page:1,
				pagesize:9,
				count:null,
				goodsId:'',
				askList:[],
				followAskList:[],
				leftList:[],
				rightList:[],
                keywords:''
			}
		},
		filters:{
			answerFilter(data){
				if(data){
					return data;
				}else{
					return '暂无相关回答'
				}
			}
		},
		components:{
			fab,
			footBottom,
			paging
		},
		onPageScroll(e){
			if(e.scrollTop>=400){
				this.isTopBtn=true
			}
			if(e.scrollTop<=100){
				this.isTopBtn=false
			}
		},
		onLoad(e){
			if(e.id){
				this.goodsId = e.id; 
				this.getList(this.page,e.id,this.keywords )
				IndexAsk(e.id).then((res)=>{
					this.leftList = res.data.datas.salesGoodsList;
					this.rightList = res.data.datas.latestGoodsList;
					this.followAskList = res.data.datas.followAskList;
				})
			}else{
				this.getIndexList(this.page,this.keywords )
				ListByIndexAsk().then((res)=>{
					this.leftList = res.data.datas.salesGoodsList;
					this.rightList = res.data.datas.latestGoodsList;
					this.followAskList = res.data.datas.followAskList;
				})
			}
		},
		methods:{
            sendSearch(k){
              this.keywords = k;
              if(this.goodsId){//店铺
              	this.getList(this.page,this.goodsId,this.keywords)
              	
              }else{ //主站
              	this.getIndexList(this.page,this.keywords)
              }
            },
			getList(page,id,k){
				getAskList(id,page,this.pagesize,k).then((res)=>{
					this.askList=res.data.datas;
					this.count = res.data.count;
				})
			},
			getIndexList(page,k){
				indexAllAskList(page,this.pagesize,k).then((res)=>{
					this.askList=res.data.datas;
					this.count = res.data.count;
				})
			},
			changeAccordion : function(e){
				var accordionIndex = e.currentTarget.dataset.id;
				if (this.accordionActive == accordionIndex){accordionIndex = '';}
				this.accordionActive = accordionIndex;
			},
			dd(index){
				this.page=index;
				if(!this.goodsId){
					indexAllAskList(this.page,this.pagesize,this.keywords).then((res)=>{
						this.askList=res.data.datas;
					})
				}else{
					getAskList(this.goodsId,this.page,this.pagesize,this.keywords).then((res)=>{
						this.askList=res.data.datas;
					})
				}
			},
			navigateTo(url){
				uni.navigateTo({
				    url: url
				});
			},
			trigger(e){
				uni.redirectTo({
				    url: e.item.url
				}); 
			}
		},
	}
</script>

<style lang="scss">
	.grace-accordion-show{height:auto; animation:fadeIn 300ms linear;}
	.grace-accordion-hide{height:0; animation:fadeOut 300ms linear;}
	.answers-container{
		margin-top:110rpx;
		padding-top:20rpx;
		background: #fff;
		.answers-list{
			width:700rpx;
			margin:0 auto;
			.li{
				padding-bottom:20rpx;
				border-bottom:1px dotted  #eee;
				margin-bottom:20rpx;
			}
			.answers-q{
				display: flex;
				justify-content: space-between;
				align-items: center;
				h3{
					margin-bottom:10rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					color:#fd8197;
					font-size:13px;
					span{
						display: block;
						background: #fd8197;
						color:#fff;
						padding:2px 6px;
						border-radius: 4px;
						margin-right:6px;
					}
					i{
						font-style:normal;
					}
				}
				p{
					font-size:13px;
					span{
						color:#fd8197;
					}
					color:#666;
				}
			}
			.answers-a{
				display: flex;
				justify-content: flex-start;
				margin-top:16rpx;
				align-items: center;
				span{
					font-size:13px;
					display: block;
					background: #1bca8a;
					color:#fff;
					border-radius: 4px;
					margin-right:6px;
					padding: 0 6px;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
				}
				p{
					color:#666;
					font-size:13px;
					line-height: 18px;
				}
			}
		}
	}
	.follow-contanier{
		width:720rpx;
		margin:0 auto;
		margin-top:20rpx;
		margin-bottom:30rpx;
		h3{
			color:#343434; 	
			font-size:28rpx;
			margin-bottom:10rpx;
			font-weight:bold;
			display: flex;
			justify-content: space-between;
			align-items: center; 
		}
		.follow-list{
			.li{
				font-size:28rpx;
				color:#666;
				border-bottom:1px dotted #eee;
				padding:16rpx 0;
				.follow-left{
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
</style>
